<template>
  <!--
      作者 luoyiming
      时间：2019-10-26
      描述：设置-商城设置
  -->
  <div class="product-add">
    <!--form表单-->
    <el-row :gutter="20">
      <el-col :span="12" class="d-c-s">
        <div class="phone-theme">
          <img v-if="form.theme=='0'" :src="theme1_url">
          <img v-if="form.theme=='1'" :src="theme2_url">
          <img v-if="form.theme=='2'" :src="theme3_url">
          <img v-if="form.theme=='3'" :src="theme4_url">
          <img v-if="form.theme=='4'" :src="theme5_url">
          <img v-if="form.theme=='5'" :src="theme6_url">
          <img v-if="form.theme=='6'" :src="theme7_url">
        </div>
      </el-col>
      <el-col :span="12" class="d-c-s">
        <el-form size="small" ref="form" :model="form" label-width="50px">
          <div class="common-form">主题选择</div>
          <el-form-item label="">
            <el-radio-group v-model="form.theme" class="d-a-c f-w">
              <el-radio class="mb10 mr10" :label="'0'">主题一</el-radio>
              <el-radio class="mb10 mr10" :label="'1'">主题二</el-radio>
              <el-radio class="mb10 mr10" :label="'2'">主题三</el-radio>
              <el-radio class="mb10 mr10" :label="'3'">主题四</el-radio>
              <el-radio class="mb10 mr10" :label="'4'">主题五</el-radio>
              <el-radio class="mb10 mr10" :label="'5'">主题六</el-radio>
              <el-radio class="mb10 mr10" :label="'6'">主题七</el-radio>
            </el-radio-group>
          </el-form-item>
          <!--提交-->
          <div class="common-button-wrapper">
            <el-button type="primary" @click="onSubmit" :loading="loading">保存</el-button>
          </div>
        </el-form>
      </el-col>
    </el-row>

  </div>

</template>

<script>
  import PageApi from '@/api/page.js';
  import Upload from '@/components/file/Upload.vue';
  import {
    formatModel
  } from '@/utils/base.js';
  import theme1 from '@/assets/img/theme1.jpg';
  import theme2 from '@/assets/img/theme2.jpg';
  import theme3 from '@/assets/img/theme3.jpg';
  import theme4 from '@/assets/img/theme4.jpg';
  import theme5 from '@/assets/img/theme5.jpg';
  import theme6 from '@/assets/img/theme6.jpg';
  import theme7 from '@/assets/img/theme7.jpg';
  export default {
    data() {
      return {
        /*是否正在加载*/
        loading: false,
        /*form表单数据*/
        form: {
          theme: 'red',
        },
        all_type: [],
        type: [],
        /*是否打开图片选择*/
        isupload: false,
        theme7_url: theme7,
        theme6_url: theme6,
        theme5_url: theme5,
        theme4_url: theme4,
        theme3_url: theme3,
        theme2_url: theme2,
        theme1_url: theme1,
      };
    },
    created() {
      this.getParams()
    },

    methods: {

      /*获取配置数据*/
      getParams() {
        let self = this;
        PageApi.themeDetail({}, true).then(res => {
            self.form.theme = res.data.vars.values.theme;
            self.loading = false;
          })
          .catch(error => {

          });
      },


      /*提交*/
      onSubmit() {
        let self = this;
        let params = this.form;
        self.$refs.form.validate((valid) => {
          if (valid) {
            self.loading = true;
            PageApi.editTheme(params, true)
              .then(data => {
                self.loading = false;
                ElMessage({
                  message: '恭喜你，设置成功',
                  type: 'success'
                });
                self.$router.push('/page/theme/index');
              })
              .catch(error => {
                self.loading = false;
              });
          }
        });

      },
    }

  };
</script>
<style>
  .mb10 {
    margin-bottom: 10px;
  }

  .mr10 {
    margin-right: 10px;
  }

  .phone-theme>img {
    width: 250px;
  }

  .d-c-s {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
</style>
